<template>
  <div class="chart">
    <el-card>
      <ul class="top">
        <li class="chart-item">
          <div class="circle">{{titleList.increment_users}}</div>
          <p class="txt">今日新增用户</p>
        </li>
        <li class="chart-item">
          <div class="circle">{{titleList.total_users}}</div>
          <p class="txt">总用户量</p>
        </li>
        <li class="chart-item">
          <div class="circle">{{titleList.increment_questions}}</div>
          <p class="txt">新增试题</p>
        </li>
        <li class="chart-item">
          <div class="circle">{{titleList.total_questions}}</div>
          <p class="txt">总试题量</p>
        </li>
        <li class="chart-item">
          <div class="circle">{{titleList.total_done_questions}}</div>
          <p class="txt">总刷题量</p>
        </li>
        <li class="chart-item">
          <div class="circle">{{titleList.personal_questions}}</div>
          <p class="txt">人均刷题量</p>
        </li>
      </ul>
    </el-card>
    <el-card class="echarts">
      <p class="text">整体数据</p>
      <div class="data" ref="echarts"></div>
    </el-card>
  </div>
</template>

<script>
import { getTitleData, getDataStatistics } from "@/api/chart.js";
// 导入echarts
import echarts from "echarts";
export default {
  data() {
    return {
      titleList: "",
      statisticsList: "",
      nameList: [],
    };
  },
  created() {
    getTitleData().then((res) => {
      // console.log(res);
      this.titleList = res.data.data;
    });
    getDataStatistics().then((res) => {
      // console.log(res);
      this.statisticsList = res.data.data;
      this.statisticsList.forEach((item) => {
        this.nameList.push(item.name);
      });
      let myChart = echarts.init(this.$refs.echarts);
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: "20%",
          data: this.nameList,
        },
        color: ["#409eff", "#f76137", "#f9b358"],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.statisticsList,
          },
        ],
      };
      myChart.setOption(option);
    });
  },
};
</script>

<style lang="less">
* {
  list-style: none;
}
.chart {
  .top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .chart-item {
      .circle {
        width: 99px;
        height: 99px;
        line-height: 99px;
        border: 3px solid #2095fa;
        color: #2095fa;
        font-size: 30px;
        border-radius: 50%;
        text-align: center;
      }
      .txt {
        margin-top: 8px;
        color: #969696;
        font-size: 16px;
        text-align: center;
      }
    }
    :nth-child(3) .circle,
    :nth-child(4) .circle {
      color: #f7673f;
      border-color: #f7673f;
    }
    :nth-child(5) .circle,
    :nth-child(6) .circle {
      color: #5fd080;
      border-color: #5fd080;
    }
  }
  .echarts {
    margin-top: 8px;
    .data {
      height: 500px;
    }
    .text {
      padding-left: 20px;
      font-size: 21px;
      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
      font-weight: 400;
      color: #666666;
      letter-spacing: 1px;
    }
  }
}
</style>